
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			a{
				text-decoration: none;
			}
			.container{
				position: relative;
				width: 600px;
				height: 400px;
				margin: 100px auto 0 auto;
				box-shadow: 0 0 5px green;
				overflow: hidden;
			}
			.wrap{
				position: absolute;
				width: 4200px;
				height: 400px;
				z-index: 1;
			}
			.container .wrap img{
				float: left;
				width: 600px;
				height: 400px;
			}
			.container .buttons{
				position: absolute;
				right: 10px;
				bottom: 20px;
				width: 120px;
				height: 10px;
				z-index: 2;
			}
			.container .buttons span{
				margin-left: 5px;
				display: inline-block;
				width: 20px;
				height: 20px;
				border-radius: 50%;
				background-color: green;
				text-align: center;
				color: white;
				cursor: pointer;
			}
			.container .buttons span.on{
				background-color: red;
			}
			.arrow{
				position: absolute;
				top: 35%;
				color: green;
				padding: 0px 14px;
				border-radius: 50%;
				font-size: 50px;
				z-index: 2;
				display: none;
			}
			.arrow_left{
				left: 10px;
			}
			.arrow_right{
				right: 10px;
			}
			.container:hover .arrow{
				display: block;
			}
			.arrow:hover{
				background-color: rgba(0,0,0,0.2);
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="wrap" style="left:0px;">
				<img src="./assets/images/zhibo-1.png" />
				<img src="assets/images/zhibo-2.png">
				<img src="assets/images/zhibo-3.png" />
				<img src="assets/images/zhibo-4.png" />
			</div>
			<div class="buttons">
				<span class="on">1</span>
				<span>2</span>
				<span>3</span>
				<span>4</span>
			</div>
			<a href="javascript:;" class="arrow arrow_left">&lt;</a>
			<a href="javascript:;" class="arrow arrow_right">&gt;</a>
		</div>
    </body>
    <script>
        var wrap = document.querySelector(".wrap")
        var next = document.querySelector(".arrow_right")
        var prev = document.querySelector(".arrow_left")
        next.onclick = function() {
            next_pic();
        }
        prev.onclick = function() {
            prev_pic()
        }
        // 下一张
        function next_pic() {
            var newLeft;
            if (wrap.style.left === "-1800px") {
                newLeft = 0
            } else{
                newLeft = parseInt(wrap.style.left) - 600
            }
			index++;
			if (index > 3) {
				index = 0
			}
            wrap.style.left = newLeft + "px"
			showCurrentDots()
        }
         // 上一张
         function prev_pic() {
            var newLeft;
            if (wrap.style.left === "0px"){
                newLeft = -1800
            } else {
                newLeft = parseInt(wrap.style.left) + 600
            }
			index--;
			if(index < 0) {
				index = 3
			}
            wrap.style.left = newLeft + "px"
			showCurrentDots()
         }
        //  定时播放
         var timer = null
         function autoPlay() {
             timer = setInterval(function(){
                next_pic();
             },1000)
         }
         autoPlay();
		 var container = document.querySelector(".container")
		 container.onmouseenter = function() {
			 clearInterval(timer)
		 }
		 container.onmouseleave = function() {
			autoPlay();
		 }
		//  全局索引
		var index = 0
		var dots = document.getElementsByTagName("span")
		//  标签选中方法
		function showCurrentDots() {
			for (let i = 0; i < dots.length; i++) {
				dots[i].className = ""
			}
			dots[index].className = "on"
		}
		// 点击小圆点，就使wrap的Left变成相应的值
		for (var i = 0; i < dots.length; i++) {
			(function(i){
				dots[i].onclick = function() {
					/*
                    原理就是当点击到小圆点时，得到相应的i值，这个i值也就是span的index值，我们拿他和全局变量index作比较，
                    然后重新设置wrap.style.left的值，然后把i值复制给全局变量index，最后显示当前的小原点即可
                    */
					var dis = index - i
					wrap.style.left = (parseInt(wrap.style.left) + dis * 600) + "px"
					index = i
					showCurrentDots();
				}
			})(i)
		}
    </script>
</html>